<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<script type="text/javascript">
    $(function() {
        $("#dialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 700,
            width: 750,
            resizable: false,
            modal: true,
            closeOnEscape: false,
            open: function(event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            },
            buttons: {
                '<fmt:message key="order.button.save"/>' : function() {
                    var formData = formInputFields.getAllInputFieldsValues('dialog');
                    ajax.runSyncAjaxCall(
                            'mapController.do',
                            {action : 'orderSave'},
                            formData,
                            function(data){
                                alert(data);
                            },
                            true
                    );
                },
                '<fmt:message key="order.button.cancel"/>': function() {
                    $(this).dialog('close');
                }
            },
            close: function() {

            }
        });

        $('#order-date').datepicker($.datepicker.regional['${LOCALE_ATTR}']);
        $('#order-complete-time').datepicker($.datepicker.regional['${LOCALE_ATTR}']);

        $("#input-orderPlaceStart").autocomplete("mapController.do", {
            delay:10,
            minChars:2,
            matchSubset:1,
            autoFill:true,
            matchContains:1,
            cacheLength:10,
            selectFirst:true,
            formatItem:liFormat,
            maxItemsToShow:10,
            onItemSelect:selectItem,
            extraParams: {action : 'handleAutocompleteDeliveryAddress'}
        });

        function liFormat (row, i, num) {
            var result = row[0] + '';
            return result;
        }
        function selectItem(li) {
            if( li == null ) var sValue = 'No items selected!';
            if( !!li.extra ) var sValue = li.extra[2];
            else var sValue = li.selectValue;
            alert(li.selectValue + ', ' + li.extra);
        }
    });

</script>

<div id="dialog" title='<fmt:message key="order.header"/>' class="app-panel">
    <table cellpadding="0" cellspacing="0" class="app-panel">
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.map.type"/>
            </td>
            <td class="app-section-input">
                <input id="input-cardTypeId" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.service"/>
            </td>
            <td class="app-section-input">
                <input id="input-service" type="text" size="10"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.map.number"/>
            </td>
            <td class="app-section-input">
                <input id="input-cardNumber" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.date"/>
            </td>
            <td class="app-section-input">
                <input id="input-dateStarted" type="text" size="10"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.prhone"/>
            </td>
            <td class="app-section-input">
                <input id="input-phone" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.complete.time"/>
            </td>
            <td class="app-section-input">
                <input id="input-dateEnded" type="text" size="10"/>
            </td>
        </tr>
        <tr>
			<td class="app-section-header">
				<fmt:message key="order.name"/>
			</td>
			<td colspan="3" class="app-section-input">
                <input id="input-custumerName" type="text" size="60"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.employee.id"/>
            </td>
            <td class="app-section-input">
                <input id="input-driverLicense" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.employee.received.by"/>
            </td>
            <td class="app-section-input">
                <input id="input-managerName" type="text" size="10"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.car.model"/>
            </td>
            <td class="app-section-input">
                <input id="input-carModel" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.assistance"/>
            </td>
            <td class="app-section-input">
                <input id="order-assistance" type="text" size="10"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.car.number"/>
            </td>
            <td class="app-section-input">
                <input id="input-stateNumber" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.priority"/>
            </td>
            <td class="app-section-input">
                <input id="input-priority" type="text" size="10"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.car.color"/>
            </td>
            <td class="app-section-input">
                <input id="input-color" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.call.to.client"/>
            </td>
            <td class="app-section-input">
                <input id="input-callCastumerOrNot" type="text" size="10"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.car.weight"/>
            </td>
            <td class="app-section-input">
                <input id="input-weight" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.call.to.TSP"/>
            </td>
            <td class="app-section-input">
                <input id="input-callDriverOrNot" type="text" size="10"/>
            </td>
        </tr>

        <tr>
            <td class="app-section-header">
                <fmt:message key="order.delivery.address"/>
            </td>
            <td colspan="3" class="app-section-input">
                <input id="input-orderPlaceStart" type="text" size="70"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.description"/>
            </td>
            <td colspan="3" class="app-section-input">
                <textarea id="input-orderPlaceDesc" rows="4" cols="70"></textarea>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.evacuation.location"/>
            </td>
            <td colspan="3" class="app-section-input">
                <input id="input-orderPlaceEnd" type="text" size="70"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.cash"/>
            </td>
            <td class="app-section-input">
                <input id="input-encashe" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.evacuation.cost"/>
            </td>
            <td class="app-section-input">
                <input id="input-equalEvacuationPrice" type="text" size="10"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.not.cash"/>
            </td>
            <td colspan="3" class="app-section-input">
                <input id="input-cashless" type="text" size="40"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.malfunction"/>
            </td>
            <td colspan="3" class="app-section-input">
                <input id="input-malfunction" type="text" size="40"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.TSP.choise"/>
            </td>
            <td class="app-section-input">
                <input id="input-carChoice" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.TSP.type"/>
            </td>
            <td class="app-section-input">
                <input id="input-carChoiseType" type="text" size="10"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.decision"/>
            </td>
            <td class="app-section-input">
                <input id="input-decision" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.state"/>
            </td>
            <td class="app-section-input">
                <input id="input-carState" type="text" size="10"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.TSP.used"/>
            </td>
            <td class="app-section-input">
                <input id="order-TSP-used" type="text" size="40"/>
            </td>
            <td class="app-section-header">
                <fmt:message key="order.preliminary"/>
            </td>
            <td class="app-section-input">
                <input id="order-preliminary" type="text" size="10"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.service.begin"/>
            </td>
            <td class="app-section-input" colspan="3">
                <input id="order-service-begin" type="text" size="40"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.service.end"/>
            </td>
            <td class="app-section-input" colspan="3">
                <input id="order.service.end" type="text" size="40"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.credit.card.type"/>
            </td>
            <td class="app-section-input" colspan="3">
                <input id="input-creditCardTypeId" type="text" size="40"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.credit.card.number"/>
            </td>
            <td class="app-section-input" colspan="3">
                <input id="input-creditCardNumber" type="text" size="40"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.credit.card.authorization.code"/>
            </td>
            <td class="app-section-input" colspan="3">
                <input id="input-authorizationCode" type="text" size="40"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.costumer.company.name"/>
            </td>
            <td colspan="3" class="app-section-input">
                <input id="input-organization" type="text" size="70"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.phone.line"/>
            </td>
            <td class="app-section-input" colspan="3">
                <input id="input-organizationPhone" type="text" size="40"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.discount"/>
            </td>
            <td class="app-section-input" colspan="3">
                <input id="input-discount" type="text" size="40"/>&nbsp;&nbsp;%:&nbsp;&nbsp;<input id="order-discount-result" type="text" size="10"/>
            </td>
        </tr>
        <tr>
            <td class="app-section-header">
                <fmt:message key="order.comments"/>
            </td>
            <td colspan="3" class="app-section-input">
                <textarea id="input-notes" rows="4" cols="70"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="4" class="app-section-input">
                <table cellpadding="0" cellspacing="0" class="app-panel">
                    <tr>
                        <td class="app-section-header">
                            <fmt:message key="order.driver"/>
                        </td>
                        <td class="app-section-input">
                            <input id="input-driver" type="text" size="15"/>
                        </td>
                        <td class="app-section-header">
                            <fmt:message key="order.found"/>
                        </td>
                        <td class="app-section-input">
                            <input id="input-driverHasFound" type="text" size="15"/>
                        </td>
                        <td class="app-section-header">
                            <fmt:message key="order.assisted.by"/>
                        </td>
                        <td class="app-section-input">
                            <input id="input-driverWhoHelped" type="text" size="15"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
